<template>
  <main class="container">
    <div class="relative">
      <input 
        type="text" 
        placeholder="请输入城市名称"
        v-model="keyword"
        @input="onInput"
        @blur="hideList"
      />
      <ul v-if="showList">
        <li 
          v-for="city in filteredCities" 
          :key="city"
          @mousedown="select(city)"
          v-if="filteredCities.length"
        >
          {{ city }}
        </li>
        <li v-else>
          似乎没有找到你查找的城市
        </li>
      </ul>
    </div>
    <div class="cityList" v-show="!showList">
      <div class="cityItem" v-for="(city, index) in cityList" :key="index">
        <div class="city">
          <h3>{{ city.name }}</h3>
          <span>{{ city.temperature }}度</span>
        </div>
        <div class="btns">
          <button @click="viewWeather(city.name)">查看</button>
          <button @click="removeCity(index)">删除</button>
        </div>
      </div>
    </div>
    <h2 class="title">近期天气</h2>
    <CityWeatherChart />
  </main>

    <!-- 全局小遮罩 -->
  <transition name="fade">
    <div v-if="loading" class="loading-mask">
      <div class="spinner"></div>
      <p>正在获取天气数据...</p>
    </div>
  </transition>
</template>

<script setup>
import CityWeatherChart from "@/components/CityWeatherChart.vue"
import { ref, computed } from "vue"

// 引入路由
import { useRouter } from "vue-router"
const router = useRouter()

// 引入store
import { useWeatherStore, useCityListStore } from "@/store/"

// 引入接口
import { getCityByName, getWeatherByAdcode } from "@/api/city.js"


// 输入框
const keyword = ref("")
const showList = ref(false) // 控制列表显示
import { cityNames } from "@/data/cityData.js"
const filteredCities = computed(() => // 筛选可选城市
  keyword.value
    ? cityNames.filter(city => city.includes(keyword.value))
    : []
)
function onInput() { // 显示列表
  showList.value = !!keyword.value
}
function hideList() { // 隐藏列表
  showList.value = false
}
const cityListStore = useCityListStore() // 存储城市列表的store
async function select(city) {  // 选择城市事件 city="xx市"
  keyword.value = city
  showList.value = false
  
  // 触发viewWeather函数 跳转到详情页
  viewWeather(city)
}

// 列表渲染数据 从store拿 [{name: xx市, temperature: xx}, ...]
const cityList = computed(() => cityListStore.cityList) 

const weatherStore = useWeatherStore() // 存储天气的store

// 查看列表城市天气事件
const loading = ref(false)
async function viewWeather(city) { // city="xx市"
  loading.value = true
  // 获取adcode
  const data = await getCityByName(city)
  const adcode = data.geocodes[0].adcode

  // 获取对应城市当前天气并存入pinia中
  const Current = await getWeatherByAdcode(adcode,) // 获取 查看/搜索 城市当前天气
  weatherStore.setCurrentSearchCity(Current.lives[0])

  // 获取对应城市预测天气并存入pinia中
  const Forecast = await getWeatherByAdcode(adcode, "all") // 获取 查看/搜索 城市预报天气
  weatherStore.setForecastSearchCity(Forecast.forecasts[0].casts)

  // 跳转路由 /weather/510100?search=成都市
  router.push({
    path: "/weather/" + adcode,
    query: { search: city },
  })
}

//删除点击事件 从store中删除
function removeCity(index) {
  cityListStore.removeCity(index)
}
</script>

<style scoped>
/* main */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 10rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .header .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .header .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .header .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
.container .relative {
  position: relative;
  margin-bottom: 2rem;
  padding-top: 1rem;
}
.container .relative input[type="text"] {
  text-decoration: none;
  width: 100%;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #ffffff;
  margin: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  outline: none; /* 去掉聚焦时的轮廓线 */
  box-shadow: none; /* 去掉聚焦时的阴影 */
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.container .relative input[type="text"]::placeholder {
  color: #ffffff99;     /* 半透明白) */
}
.container .relative ul {
  position: absolute;
  top: 62px;
  width: 100%;
  background-color: rgb(0 78 113);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.25rem;
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  li {
    padding: 0.5rem 0;
    cursor: pointer;
  }
}
.container .relative input[type="text"]:focus {
  border: 1px solid #00668a;
  box-shadow: 0 2px 5px 0px #004e71;
}
.container .cityList {
  margin-top: 2.5rem;
  max-height: 300px;
}
.container .cityList .cityItem {
  display: flex;
  justify-content: space-between;
  /* overflow-y: scroll; */
  .city {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #004e71;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    h3 {
      margin: 0;
      font-size: inherit;
      font-weight: inherit;
    }
  }
  .btns {
    display: flex; 
    flex: 0 0 auto;
    width: 0; 
    opacity: 0;
    overflow: hidden;
    pointer-events: none; 
    transition: width .3s ease, opacity .25s ease;
    will-change: width;

    gap: 0.5rem;
    margin-bottom: 1rem;
    button {
      flex:0 0 80px; 
      width: 80px;
      background-color: rgb(234 179 8);
      border: 0;
      margin: 0;
      padding: 0;
      font-family: inherit;
      font-size: 100%;
      font-weight: inherit;
      line-height: inherit;
      color: inherit;
      text-align: center;
      cursor: pointer;
    }
  }
  .city:hover {
    width: 80%;
  }
  .city:hover + .btns {
    width: 170px;
    opacity: 1;
    pointer-events: auto;
  }
  .btns:hover {
    width: 170px;
    opacity: 1;
    pointer-events: auto;
  }
}
.container .title {
  margin: 0;
  margin-top: 1.5rem;
  font-size: inherit;
  font-weight: inherit;
}

/* 全局小遮罩 */
.loading-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:1200;
  color:#fff;
  font-size:14px;
  backdrop-filter: blur(2px);
}

.spinner {
  width:48px;
  height:48px;
  border:4px solid #ffffff55;
  border-top-color:#ffd400;
  border-radius:50%;
  animation: spin 0.9s linear infinite;
  margin-bottom:1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
